
<template> 
<div>
  <ContentWrap>
    <el-form :model="queryParams" :inline="true" class="demo-form-inline mb-4">
      <el-form-item label="海报名称">
        <el-input v-model="queryParams.name" placeholder="请输入海报名称" class="!w-200px" clearable />
      </el-form-item>
        <el-form-item label="海报类型">
          <el-select v-model="queryParams.typeId" placeholder="请选择海报类型" class="!w-200px" clearable>
            <el-option v-for="item in posterTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item >
        <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="handleAdd">新增海报</el-button>
        </el-form-item>
      </el-form>
  </ContentWrap>

  <ContentWrap>
    <!--  -->
    <el-table :data="tableData" :loading="loading"  stripe :show-overflow-tooltip="true" >
        <el-table-column label="添加日期" prop="createTime" align="center" >
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="海报名称" prop="name" align="center" />
        <el-table-column label="海报类型" prop="typeName" align="center" />
        <el-table-column label="扫码数" prop="viewCount" align="center" />
        <el-table-column label="引流注册人数" prop="registerCount" align="center" />
        <el-table-column label="状态" prop="status" align="center" >
          <template #default="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="action" align="center">
          <template #default="scope">
            <el-button type="primary"  link @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger"  link @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </ContentWrap>
  <AddPoster v-if="addPosterVisible" :title="addPosterTitle" :currentObj="editPosterCurrentObj" @cancel="addPosterVisible = false" @ok="addPosterOk" :posterList="posterTypeList" />
</div>
  
</template>

<script setup lang="ts">
import { ref,reactive,toRefs,onMounted } from 'vue'
import { getPosterContentPage,getPosterTypeList,createPosterContent,updatePosterContent,deletePosterContent,updatePosterContentStatus } from '@/api/allApplication/poster/index'
import AddPoster from './addPoster.vue'
import { formatDate } from '@/utils/formatTime'
import { ElMessage, ElMessageBox } from 'element-plus'
const queryParams = ref({
  name: '',
  typeId: undefined as any,
  pageNo: 1,
  pageSize: 10,
})
const state=reactive({
  tableData: [],
  addPosterVisible: false,
  addPosterTitle: '新增海报',
  editPosterCurrentObj: {} as any,
  total:0,
  loading:false,
  posterTypeList:[] as any[]
})
const { tableData,addPosterVisible,addPosterTitle,editPosterCurrentObj,total,loading,posterTypeList } = toRefs(state)
const handleSearch = () => {
  queryParams.value.pageNo = 1
  getList()
}
const handleEdit = (row: any) => {
  state.addPosterVisible = true
  state.addPosterTitle = '编辑海报'
  state.editPosterCurrentObj = row
}
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定删除该海报吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then( async () => {
    await deletePosterContent({ id: row.id })
    ElMessage.success('删除成功')
    handleSearch()
  })
}
const handleAdd = () => {
  state.addPosterVisible = true
  state.addPosterTitle = '新增海报'
  state.editPosterCurrentObj = {}
}
// 1 启用 0 禁用
const handleStatusChange = (row: any) => {
  // 先记录用户点击后的期望状态
  const targetStatus = row.status
  // 立即恢复到原始状态，等待确认
  const originalStatus = targetStatus === 1 ? 0 : 1
  row.status = originalStatus
  ElMessageBox.confirm(`确定${originalStatus === 0 ? '启用' : '禁用'}该海报吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await updatePosterContentStatus({ id: row.id, status: targetStatus })
    ElMessage.success('修改成功')
    // row.status = targetStatus
    handleSearch()
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}
const addPosterOk =async (data: any) => {
  if(editPosterCurrentObj.value.id){
    await updatePosterContent({...data,id:Number(editPosterCurrentObj.value.id)})
  }else{
    await createPosterContent({...data})
  }
  ElMessage.success('操作成功')
  state.addPosterVisible = false
  state.editPosterCurrentObj = {}
  handleSearch()
}
const getList = async () => {
  const res = await getPosterContentPage(queryParams.value)
  console.log(res)
  state.tableData = res.list
  state.total = res.total
}
const getPosterList = async () => {
  const list = await getPosterTypeList()
  state.posterTypeList = list || []
}
onMounted( async () => {
  await getPosterList()
  await handleSearch()
})
</script>